iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
1
Modern Web

D3.js新手開發基本圖表系列 第 14

Day14 座標軸

  • 分享至 

  • xImage
  •  

座標軸是圖表常見的組成之一,D3提供了座標軸的製作方式,可以省掉自己手刻svg的工。以下是一段基本的程式範例。

var svg = d3.select("body").append("svg")

var xScale = d3.scale.linear()
  .domain([0,10])
  .range([0,300])
  
var axis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  
var gAxis = svg.append("g")
  .attr("transform","translate(80,80)")
  .call(axis) // D3的選擇集可以使用call()方法,將本身作為參數傳遞給某一函式

使用d3.svg.axis()建立座標軸,scale()設定比例尺、orient設定座標軸的方向(top、bottom、left、right)。

接著建立一個<g>標籤後(<g>是svg中用來當作群組的標籤),把座標軸繪制在<g>中就完成。

程式碼中最後一行call(axis)也可以不寫,改用d3.svg.axis()的回傳值當作函式來繪制<g>,寫法為axis(gAxis)

結果如下圖

https://ithelp.ithome.com.tw/upload/images/20181028/20096057mxgkm3anQ1.png

由於是預設的樣式所以看起來比較醜,所以可以試著加上css樣式

座標軸的繪制元素有三個:

<path>為軸線

<line><text>為刻度

.axis path, .axis line{
  fill: none;
  stroke: black;
  shape-rendering: crispEdges; /*讓線條沒有毛邊*/
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

然後加入到svg中就可以了

var gAxis = svg.append("g")
  .attr("transform","translate(80,80)")
  .classed("axis",true)
  .call(axis)

結果如下圖

https://ithelp.ithome.com.tw/upload/images/20181028/20096057OoEKTrkOua.png

axis()還有幾個常用的api可以用來給座標軸做更多的變化:

tick() 設定座標軸的分隔數

tickValues() 設定座標軸的指定刻度

tickFormat() 設定刻度的格式(加上單位)


上一篇
Day13 比例尺
下一篇
Day15 練習 - 散布圖 (1)
系列文
D3.js新手開發基本圖表30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言